<script setup>
import {
  createDiscreteApi,
  NButton,
  NForm,
  NFormItem,
  NIcon,
  NInput,
  NSelect,
} from "naive-ui";
import { Close } from "@vicons/ionicons5";
import { reactive, ref } from "vue";

const formRef = ref();

const form = reactive({
  bbs_id: null,
  content: [
    {
      text: "",
      images: [],
    },
  ],
});

const rules = {
  bbs_id: [{ required: true, message: "请选择社区" }],
};

const { data: bbsData } = await useBbsListApi();

const options = computed(() => (bbsData.value ? bbsData.value.rows : []));

// 添加区块
const addBlock = () => {
  form.content.push({ text: "", images: [] });
};

//移除区块
const removeBlock = (index) => {
  const { message, dialog } = createDiscreteApi(["message", "dialog"]);
  dialog.warning({
    content: "是否要删除该区块?",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      form.content.splice(index, 1);
      message.success("删除成功");
    },
  });
};



const loading = ref(false);
const onSubmit = () => {
  formRef.value.validate(async (errors) => {
    const {message} = createDiscreteApi(['message'])
    if (errors || form.content.filter((o) => o.text.trim() === '').length) {
      return message.warning('请检查帖子内容是否为空')
    }
    loading.value = true;
    const {error} = await useAddPostApi(form);
    loading.value = false;
    if (error.value) return
    message.success('发布成功')
    navigateTo("/bbs/0/1")
  })
}


definePageMeta({
  middleware: ['auth']
})
</script>
<template>
  <div class="flex justify-center">
    <ClientOnly>
      <n-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :show-label="false"
        style="width: 500px"
      >
        <n-form-item path="bbs_id">
          <n-select
            v-model:value="form.bbs_id"
            :options="options"
            label-field="title"
            placeholder="请选择社区"
            value-field="id"
          />
        </n-form-item>

        <div
          v-for="(item, index) in form.content"
          :key="index"
          class="bg-white rounded p-5 mb-5 shadow"
        >
          <div v-if="index > 0" class="flex justify-end mb-2">
            <n-button size="small" @click="removeBlock(index)">
              <n-icon>
                <Close />
              </n-icon>
            </n-button>
          </div>
          <n-form-item>
            <n-input
              v-model:value="item.text"
              placeholder="请填写帖子内容"
              type="textarea"
            />
          </n-form-item>
          <n-form-item>
            <Uploader v-model="item.images" :max="9" />
          </n-form-item>
        </div>

        <n-form-item>
          <n-button class="w-full" dashed type="info" @click="addBlock"
            >添加区块</n-button
          >
        </n-form-item>


        <n-form-item>
            <n-button :loading="loading" class="ml-auto" type="primary" @click="onSubmit">发布</n-button>
          </n-form-item>
      </n-form>
    </ClientOnly>
  </div>
</template>

<style scoped></style>
